<template>
    <div class="caontiner">
       <div class="nav">
           <div class="navList">
                <div :class='active==index ?"active":""' v-for="(temp,index) in array" :key="index" @click=" routerLink(temp.href,index)">{{temp.name}}</div>
                <!-- <div @click="routerLink('interact')">互动H5</div>
                <div @click="routerLink('longPic')">长图简漫</div>
                <div @click="routerLink('poster')">创意海报</div> -->
           </div>
           <div class="company">YOU&ME interaction</div>
       </div>
    </div>
</template>

<script>
export default {
  computed:{
    active(){
     return this.$store.state.header_active1 
    }
  },
  data(){
    return{
      // array:["首页","案例","专题","合作","关于" ]
      array:[
        {
        name:"创意视频",href:"video",
        },
        {
        name:"互动H5",href:"interact",
        },
        {
        name:"长图简漫",href:"longPic",
        },
        {
        name:"创意海报",href:"poster",
        }
      ]
    }
  },
  methods:{
    routerLink(name,index){
        if(this.active==index){
            return
        }
      this.$store.commit("SETTING_HEADER_ACTIVE1",index)
      this.$router.push({
        name
      })
    }
  }
}
</script>
<style lang="less">
.caontiner{
    width: 100%;
    display: flex;
    justify-content: space-between;
    background: #F2F2F2;
    box-shadow:0px 1px 8px 0px rgba(189,189,189,0.32);
    .nav{
        width: 1200px;
        height: 50px;
        line-height: 50px;
        margin: 0 auto;
        // padding: 1vw 19vw; 
        background: #F2F2F2;
        display: flex;
        justify-content:space-between;
        .navList{
            display: flex;
            width: 40%;
            justify-content:space-between;
        }
        .active{
            color: #E44F50;
            position: relative;
            &::after{
                content: '';
                display: block;
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                border:1px solid #E44F50;
                width: 50px;
            }
        }
        .company{
            color: #979797
        }
    }
}
</style>